<template>
  <je-modal
    v-model:visible="visible"
    width="600px"
    title="关联顶部菜单"
    height="auto"
    :resize="false"
    :maximizable="false"
    cancel-button
    :ok-button="handleOk"
    @close="handleClose"
  >
    <je-form
      ref="formRef"
      class="content"
      :rules="rules"
      :model="formState"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :colon="false"
      size="small"
      item-style="margin-bottom:6px;"
    >
      <je-form-item :label="$t('menuDetail.name')" name="MENU_MENUNAME">
        <je-input v-model:value.trim="formState.MENU_MENUNAME" autocomplete="off" disabled />
      </je-form-item>
      <je-form-item :label="$t('menuDetail.contextTopMenu')" name="MENU_LINK_TOPMENU_NAME">
        <je-grid-select
          v-model:value="formState.MENU_LINK_TOPMENU_NAME"
          :querys="[{ type: '=', code: 'HEADMENU_TYPE_CODE', value: 'MENU' }]"
          config-info="JE_RBAC_HEADMENU,MENU_LINK_TOPMENU_NAME~MENU_LINK_TOPMENU_ID,HEADMENU_NAME~JE_RBAC_HEADMENU_ID,M"
        />
      </je-form-item>
    </je-form>
  </je-modal>
</template>

<script>
  import { ref, reactive, toRefs, toRaw, defineComponent, onMounted, onBeforeMount } from 'vue';
  import { Modal, Form, InputSelect, Input } from '@jecloud/ui';

  import emitter from '@/eventBus';

  import { doUpdateMenu } from '@/api';

  const getFormState = () => {
    return {
      MENU_MENUNAME: '',
      MENU_LINK_TOPMENU_NAME: '',
      MENU_LINK_TOPMENU_ID: '',
      JE_CORE_MENU_ID: '',
    };
  };

  export default defineComponent({
    name: 'MenuForm',
    components: {
      JeForm: Form,
      JeFormItem: Form.Item,
      JeInput: Input,
      JeGridSelect: InputSelect.Grid,
    },
    setup(props, { emit }) {
      const state = reactive({
        formState: reactive(getFormState()),
        visible: false,
        formRef: ref(),
        labelCol: {
          style: { width: '120px', margin: '0 2px 0 0' },
        },
        wrapperCol: {
          style: { margin: '0 50px 0 0' },
        },
        rules: {
          MENU_LINK_TOPMENU_NAME: [{ required: true, message: '请选择关联顶部菜单' }],
        },
      });
      const methods = {
        showCurrentTopModal(obj) {
          state.formState.MENU_MENUNAME = obj.text;
          state.formState.JE_CORE_MENU_ID = obj.id;
          state.formState.MENU_LINK_TOPMENU_ID = '';
          state.formState.MENU_LINK_TOPMENU_NAME = '';
          state.visible = true;
        },
        handleOk() {
          state.formRef
            .validate()
            .then(() => {
              methods.handleDoUpdate();
            })
            .catch((error) => {
              console.error(error);
            });
          return false;
        },

        // 保存菜单
        handleDoUpdate() {
          const vals = toRaw(state.formState);
          doUpdateMenu({
            ...vals,
            tableCode: 'JE_CORE_MENU',
          })
            .then((res) => {
              Modal.notice(res.message, 'success');

              emitter.emit('checkedMenu', { id: state.formState.JE_CORE_MENU_ID });
              state.visible = false;
            })
            .catch((error) => {
              Modal.alert(error.message, 'error');
            });
        },
      };

      onBeforeMount(() => {});
      onMounted(() => {});

      return {
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>

<style lang="less" scoped>
  .menu-top-form {
  }
</style>
